<template>
  <div class="f-columnY menu">
    <div class="f-flex1">
      <!-- 滚动条 -->
      <el-scrollbar style="height:100%" class="scrollbar-x">
        <!-- 树形结构 -->
        <el-tree ref="tree" class="tree" :data="datatree" :props="defaultProps" @node-click="handleNodeClick">
          <!-- <div class="f-betweenX custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node. }}<label/span>
            <span>
              <i @click="append(node, data)" class="el-icon-plus"></i>
              <!--增加分组-->
          <!-- 根节点不需要删除和重命名 -->
          <!-- <i v-if="data.id !== 0" @click="deletes(node, data)" class="el-icon-delete"></i> -->
          <!--删除分组-->
          <!-- <i v-if="data.id !== 0" @click="rename(node, data)" class="el-icon-edit"></i> -->
          <!--重命名分组-->
          <!-- </span> -->
          <!-- </div> -->
        </el-tree>
      </el-scrollbar>
    </div>
  </div>

</template>

<script>
import { getSspaceTree } from '@/api/settings'
export default {
  components: {
  },
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'name',
        disabled: 'disabled'
      },
      selectData: {},
      selectNode: {},
      type: 'default',
      datatree: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted () {
    getSspaceTree()
      .then(res => {
        if (res.code === 0) {
          this.tree = res.data
        } else {
          // this.$message.error(res.msg)
        }
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    // 添加
    append (node, data) {
      this.selectNode = node
      this.selectData = data
      this.$refs.add.toggleAdd(true, data.type)
    },
    addPersonnel (data) {
      if (this.type == 'default') {
        this.tree.push(data)
      } else {
        this.selectData.children.push(data)
        if (!this.selectNode.expanded) {
          this.selectNode.expanded = true
        }
      }
    },
    // 选中
    handleNodeClick (data) {
      this.type = data.type
      const sendData = {
        icon: data.icon || '',
        title: data.label || '',
        items: data.children || []
      }
      this.$emit('getMessage', sendData)
    }

  }
}
</script>

<style lang="scss" scoped>
.menu {
  width: 300px;
  height: 100% !important;
  border: 1px solid #ebeef5;
  box-shadow: -1px -1px 2px 2px #ebeef5;
  .header {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
  }
  .tree {
    padding: 20px;
    ::v-deep .el-tree-node__content {
      height: 36px;
    }
    ::v-deep .custom-tree-node {
      width: 100%;
      i {
        padding: 0 3px;
      }
    }
  }
}
</style>
